<m-notice [icon]="'flaticon-exclamation m--font-primary'">
	For more info please check the components's official demos & documentation 
	<a class="m-link" href="https://ng-bootstrap.github.io/#/components/typeahead/examples" target="_blank">demos & documentation</a>
</m-notice>

<div class="row">
	<div class="col-xl-6">

		<m-material-preview [viewItem]="exampleSimpleTypeahead">
			<div class="m-section">
				<div class="m-section__sub">
					A typeahead example that gets values from a static
					<code>string[]</code>
					<ul>
						<li>
							<code>debounceTime</code> operator</li>
						<li>kicks in only if 2+ characters typed</li>
						<li>limits to 10 results</li>
					</ul>

				</div>
				<div class="m-section__content">
					<label for="typeahead-basic">Search for a state:</label>
					<input id="typeahead-basic" type="text" class="form-control" [(ngModel)]="model" [ngbTypeahead]="search" />
				</div>
			</div>

			<div class="m-separator m-separator--dashed"></div>
			<div class="m-section">
				<div class="m-section__sub">
					<pre>Model: {{ model | json }}</pre>
				</div>
			</div>
		</m-material-preview>

		<m-material-preview [viewItem]="exampleOpenOnFocus">
			<div class="m-section">
				<div class="m-section__sub">
					It is possible to get the focus events with the current input value to emit results on focus with a great flexibility. In this simple example, a search is done no matter the content of the input:
					<ul>
						<li>on empty input all options will be taken</li>
						<li>otherwise options will be filtered against the search term</li>
						<li>it will limit the display to 10 results in all cases</li>
					</ul>
				</div>
				<div class="m-section__content">
					<label for="typeahead-focus">Search for a state:</label>
					<input 
						id="typeahead-focus" 
						type="text" 
						class="form-control" 
						[(ngModel)]="model2" 
						[ngbTypeahead]="search2" 
						(focus)="focus$.next($event.target.value)" 
						(click)="click$.next($event.target.value)" 
						#instance="ngbTypeahead" />
				</div>
			</div>

			<div class="m-separator m-separator--dashed"></div>
			<div class="m-section">
				<div class="m-section__sub">
					<pre>Model: {{ model2 | json }}</pre>
				</div>
			</div>
		</m-material-preview>


		<m-material-preview [viewItem]="exampleFormattedResults">
			<div class="m-section">
				<div class="m-section__sub">
					A typeahead example that uses a formatter function for string results
				</div>
				<div class="m-section__content">
					<label for="typeahead-format">Search for a state:</label>
					<input id="typeahead-format" type="text" class="form-control" [(ngModel)]="model3" [ngbTypeahead]="search3" [resultFormatter]="formatter3" />
				</div>
			</div>

			<div class="m-separator m-separator--dashed"></div>
			<div class="m-section">
				<div class="m-section__sub">
					<pre>Model: {{ model3 | json }}</pre>
				</div>
			</div>
		</m-material-preview>
	</div>
	<div class="col-xl-6">


		<m-material-preview [viewItem]="exampleWikipediaSearch">
			<div class="m-section">
				<div class="m-section__sub">
					A typeahead example that gets values from the
					<code>Wikipedia Search</code>
					<ul>
						<li>remote data retrieval</li>
						<li>
							<code>debounceTime</code> operator</li>
						<li>
							<code>do</code> operator</li>
						<li>
							<code>distinctUntilChanged</code> operator</li>
						<li>
							<code>switchMap</code> operator</li>
						<li>
							<code>catch</code> operator to display an error message in case of connectivity issue</li>
					</ul>
				</div>
				<div class="m-section__content">

					<div class="form-group">
						<label for="typeahead-http">Search for a wiki page:</label>
						<input id="typeahead-http" type="text" class="form-control" [class.is-invalid]="searchFailed" [(ngModel)]="model4" [ngbTypeahead]="search4" placeholder="Wikipedia search" />
						<span *ngIf="searching">searching...</span>
						<div class="invalid-feedback" *ngIf="searchFailed">Sorry, suggestions could not be loaded.</div>
					</div>
				</div>
			</div>

			<div class="m-separator m-separator--dashed"></div>
			<div class="m-section">
				<div class="m-section__sub">
					<pre>Model: {{ model4 | json }}</pre>
				</div>
			</div>
		</m-material-preview>

		<m-material-preview [viewItem]="exampleTemplateForResults">
			<div class="m-section">
				<div class="m-section__sub">
					A typeahead example that uses custom template for results display and uses object as a model </div>
				<div class="m-section__content">
					<ng-template #rt let-r="result" let-t="term">
						<img [src]="'https://upload.wikimedia.org/wikipedia/commons/thumb/' + r['flag']" width="16"> {{ r.name}}
					</ng-template>

					<label for="typeahead-template">Search for a state:</label>
					<input id="typeahead-template" type="text" class="form-control" [(ngModel)]="model5" [ngbTypeahead]="search5" [resultTemplate]="rt" [inputFormatter]="formatter" />
				</div>
			</div>

			<div class="m-separator m-separator--dashed"></div>
			<div class="m-section">
				<div class="m-section__sub">
					<pre>Model: {{ model5 | json }}</pre>
				</div>
			</div>
		</m-material-preview>

		<m-material-preview [viewItem]="exampleGlobalConfigurationOfTypeaheads">
			<div class="m-section">
				<div class="m-section__sub">
					This typeahead shows a hint when the input matches because the default values have been customized.
				</div>
				<div class="m-section__content">
					<label for="typeahead-config">Search for a state:</label>
					<input id="typeahead-config" type="text" class="form-control" [(ngModel)]="model6" [ngbTypeahead]="search6" />
				</div>
			</div>
		</m-material-preview>
	</div>
</div>